<template>
  <div class="feature-background">
    <div class="block">
      <el-carousel height="510px">
        <el-carousel-item v-for="item in items" :key="item.id">
          <h2>{{ item.h2Text }}</h2>
          <h3>{{ item.h3Text }}</h3>
          <img :src="item.url" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          id: 1,
          url: 'https://wj.qq.com/image/index_slider_p0.png?v=@version',
          h2Text: '多方式创建编辑问卷',
          h3Text: '自由创建，导入问卷，使用模板三中方式随意选择',
        },
        {
          id: 2,
          url: 'https://wj.qq.com/image/index_slider_p3.png?v=@version',
          h2Text: '免费简约的问卷系统',
          h3Text: '所有功能全部免费，简约好用',
        },
        {
          id: 3,
          url: 'https://wj.qq.com/image/index_slider_p2.png?v=@version',
          h2Text: '数据实时在线统计',
          h3Text: '回收数据实时在线统计',
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.feature-background {
  background: url('~@/assets/bg.png');
  // background-color: red;
  height: 510px;
  background-size: cover;
  background-position: 50% 0;
}
.block {
  width: 1040px;
  margin: 0 auto;
  text-align: center;
  height: 510px;
}
.el-carousel__item h3 {
  color: white;
  margin: 0;
}
.el-carousel__item h2 {
  padding-top: 110px;
  color: white;
  font-size: 50px;
  margin: 0;
}
.el-carousel__item img{
  margin-top: 50px;
}
</style>
